@include('Home.head')
<style type="text/css">
.clothes-div
{
    overflow:hidden;
    display: inline-block;
    margin: 5px;
}
.am-btn.am-btn-default.specs
{
    float: left;
    margin-right: 3%;
    width: 65px;
    height: 40px;
    border-radius: 5px;
    color: #fff;
    background: #919891;
    text-align: center;
    margin-top: 1%;
    margin-bottom: 1%;
    outline: none;
}
.asdw {
	font-size: 00;
}
.specs-p
{
    margin-top: 5%;
}
.am-tab-panel img{
    width: 100%;
}
[v-cloak]{
    display: none;
}
</style>
</head>
<body>
<div class="container" id="app" v-cloak>
    <header data-am-widget="header" class="am-header am-header-default my-header">
        <div class="am-header-left am-header-nav">
            <a href="javascript:history.back(-1);" class="">
                <i class="am-header-icon am-icon-chevron-left"></i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a href="#title-link" class="">@{{ goods.goodsname }}</a>
        </h1>
    </header>
    <!-- banner -->
    <template>
        <div class="block">
            <el-carousel>
                <el-carousel-item v-for="item in goodsImgName">
                    <img :src="item.img" height="100%" width="100%" >
                </el-carousel-item>
            </el-carousel>
        </div>
    </template>

    <div class="gray-panel">
    	<div class="paoduct-title-panel">
        	<h1 class="product-h1">@{{ goods.goodsname }}</h1>
            <p><span class="am-fr product-title-gray-text"><i class="am-icon-star"></i>收藏</span><span class="bold">价格：</span><span class="red2">￥@{{ goods.rulingprice }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{--<span class="product-title-gray-text">积分：300积分</span></p>--}}
        </div>
        <div class="my-search-title-panel">
        	<ul class="am-avg-sm-4 am-text-center am-text-sm">
                <li class="am-text-center">库存<br />@{{ goods.total }}件</li>
                <li class="am-text-center">销量<br />@{{ goods.sold }}件</li>
            </ul>
    	</div>



        <div class="my-search-title-panel">

            <div class="superlast" id="stick_liquid_type" >
                <!--  老版本  留着看一下
                <p class="my-search-titp-p am-text-sm bold">曲线枕</p>
                <p class="my-search-titp-p am-text-sm bold">百草液</p>
                <div style="overflow:hidden">
                <form class="am-form-inline" role="form">
                	<button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="stickMinus()"><i class="am-icon-minus"></i></button>
                    <input type="number" name="txtQty" v-model="stick" disabled="disabled" class="am-form-field txt-qty am-text-center am-text-sm" style=" width:60px; margin-right:0px; height:40px; display:inline; float:left">
                    <button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="stickAdd()"><i class="am-icon-plus"></i></button>
                </form>
                </div>


                <p class="my-search-titp-p am-text-sm bold">睡眠新世界</p>
                <div style="overflow:hidden">
                    <form class="am-form-inline" role="form">
                        <button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="liquidMinus()" ><i class="am-icon-minus"></i></button>
                        <input type="number" name="txtQty" v-model="liquid" disabled="disabled" class="am-form-field txt-qty am-text-center am-text-sm" style=" width:60px; margin-right:0px; height:40px; display:inline; float:left">
                        <button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="liquidAdd()"><i class="am-icon-plus"></i></button>
                    </form>
                </div>
                -->

                <p class="my-search-titp-p am-text-sm bold">@{{ goods.goodsname }}</p>
                <div style="overflow:hidden">
                    <form class="am-form-inline" role="form">
                        <button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="ce()" ><i class="am-icon-minus"></i></button>
                        <input type="number" name="txtQty" v-model="liquid" disabled="disabled" class="am-form-field txt-qty am-text-center am-text-sm" style=" width:60px; margin-right:0px; height:40px; display:inline; float:left">
                        <button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="ce()"><i class="am-icon-plus"></i></button>
                    </form>
                </div>
            </div>


            <div class="my-search-title-panel" id="clothes_type" >
                <div class="first-each-div" v-for="v,i in specsList" >
                    <p class="my-search-titp-p am-text-sm bold specs-p">@{{ v.name }}</p>
                    <div v-for="val,index in specsLists" >
                        <div v-if = "val.specs_id == v.id"  class="you specs" >
                           <div class="clothes-div" v-for="j,m in val.vals">
                                <button type="button" class="am-btn am-btn-default specs" checkSpecs="2" v-on:click="checkedSpecs( j.id )"  :id="'specs-btnss'+j.id">@{{ j.val }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <hr data-am-widget="divider" style="" class="am-divider-default am-margin-bottom-sm"/>
            <div class="am-cf cart-panel">
				<p id="typeHid" class="am-text-center" v-on:click="add(goods.id,1)">
					<button type="button" class="am-btn am-btn-danger am-radius am-btn-block " style="border-radius: 50px;" v-if="type == 1">立即复投</button>
					<button type="button" class="am-btn am-btn-danger am-radius am-btn-block " style="border-radius: 50px;" v-else>立即购买</button>
				</p>
				<!-- <p id="typeHidss" class="am-text-center" v-on:click="add(goods.id,1)"><button type="button" class="am-btn am-btn-danger am-radius am-btn-block " style="border-radius: 50px;" >立即购买</button></p> -->
            </div>
        </div>
    </div>
    <!-- 商品详情 -->
    <div data-am-widget="tabs" class="am-tabs am-tabs-d2">
        <ul class="am-tabs-nav am-cf">
            <li class="am-active">
                <a href="[data-tab-panel-0]">详情</a>
            </li>
            <li class="">
                <a href="[data-tab-panel-1]">交易记录</a>
            </li>
        </ul>
        <div class="am-tabs-bd">
            <div data-tab-panel-0 class="am-tab-panel am-active" v-html="goods.spec"></div>
            <div data-tab-panel-1 class="am-tab-panel ">
                <ul class="am-list am-list-static am-list-border am-list-striped am-text-sm">
                    <li v-for="val in orderData" v-if="orderData.length">@{{ val.name }}于@{{ val.createtime }}日购买成功</li>
                    <li v-if="orderData.length == 0">暂无交易记录</li>
                </ul>

            </div>
        </div>
    </div>
    @include('Home.foot')
</div>
</body>
<script type="text/javascript">

    function checkedSpecs(e)
    {
        var checkSpecs = $("#specs-btnss"+e).attr( "checkSpecs" );
        if ( checkSpecs == 1 ) {
            $("#specs-btnss"+e).attr( "checkSpecs", 2 );
            $("#specs-btnss"+e).css("background","#919891");
        } else {
            $("#specs-btnss"+e).attr( "checkSpecs", 1 );
            $("#specs-btnss"+e).css("background","#5bb95b");
            $("#specs-btnss"+e).parent('.clothes-div').siblings('').find('button').attr( "checkSpecs", 2 );
            $("#specs-btnss"+e).parent('.clothes-div').siblings('').find('button').css("background","#919891");
        }
    }
</script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            goods:[],
            goodsImgName:[],
            stick:0, //冷敷贴
            liquid:1, //百草液
            credit3:0, //复投币
            credit3s:200, //复投币
            orderData: {},
            //商品规格名
            specsList : {},
            //商品规格名--值
            specsLists: {},
            islastsuper:1,
            rotation:[],
			type: 0
        },
		created: function () {
			this.initialize();
		},
        //事件
        methods: {
            //初始化 系统管理员列表
            initialize:function () {
                var id = this.obtain('id');
                if(id > 0){
                    //获取商品数据
                    $.post("/home/superShop/goods",{'_token':'{{csrf_token()}}',class:'find',id:id},function (res) {
						console.log(res)
						var _this = this;
                        if(res.code){
                            app.goods = res.data.goods;
                            app.specsList = res.GoodsSpecsName;
                            app.specsLists = res.GoodsSpecsVal;
                            app.goodsImgName = res.data.goodsImgName;
                            app.orderData = res.orderData;
							app.type = res.type;
							// if (app.type == 1) {
							// 	$("#typeHid").show();
							// 	$("#typeHidss").hide();
							// }else {
							// 	$("#typeHid").hide();
							// 	$("#typeHidss").show();
							// }
                            if ( app.specsList.length == 0 ) {
                                $("#stick_liquid_type").show();
                                $("#clothes_type").hide();
                            } else {
                                $("#stick_liquid_type").hide();
                                $("#clothes_type").show();
                                app.islastsuper = 2;
                            }
                            // app.stick = parseInt(res.data.goods.straight / 2);
                            // app.liquid = parseInt(res.data.goods.straight / 2);
                            app.credit3 = {{Session::get('home_user')->credit3 }};
                            console.dir(app.credit3);
                        } else {
                            layer.msg(res.data);
                        }
                    });
                } else {
                    window.location.href="/home/error";
                }

            },
            stickAdd:function () { //加冷敷贴
                if( app.stick >= app.goods.straight ) {
                    layer.msg('超出了范围');return;
                }
                app.stick = app.stick+1;
                app.liquid = app.liquid-1;
            },
            stickMinus:function () { //减
                if(app.stick <= 0) {
                    layer.msg('超出了范围');return;
                }
                app.stick -= 1;
                app.liquid += 1;
            },
            liquidAdd:function () { //加冷敷贴
                if( app.liquid >= app.goods.straight) {
                    layer.msg('超出了范围');return;
                }
                app.liquid = app.liquid+1;
                app.stick = app.stick-1;
            },
            liquidMinus:function () { //减
                if(app.liquid <= 0) {
                    layer.msg('超出了范围');return;
                }
                app.stick += 1;
                app.liquid -= 1;
            },
            ce:function () { //减
                if(app.liquid <= 0) {
                    layer.msg('超出了范围');return;
                }
                layer.msg('只能购买一件');return;
                app.liquid = 1;
            },
            //生成订单
            add:function ( id, type ) {
                if ( type == 0 ) {
                   layer.msg('您还未达到复投资格,不能购买!');return false;
                }
                var specs = '';
                var specsCheckData = [];
                if ( app.islastsuper == 2 ) {
                    $(".specs-p").siblings('div').find("button").each(function(){
                        if ( $(this).attr("checkSpecs") == 1 ) {
                            specsCheckData.push( $(this).attr("checkSpecs") );
                        }
                    });
                    if ( app.specsList.length != specsCheckData.length ) {
                        layer.msg('请完整选择报单产品的属性!');return false;
                    }
                    $(".clothes-div button").each(function(){
                        if ( $(this).attr("checkSpecs") == 1 ) {
                            var specsName = $(this).parents('.first-each-div').children('p').html();
                            var specsVal = $(this).html();
                            return specs = specs+specsName+':'+specsVal+';';
                        }
                    });

                    if ( specs == '' ) {
                        layer.msg('请选择报单产品属性');return false;
                    }
                }
				
				var _self = this;
				console.log(app.type)
				window.location.href = "/home/member/registerUser?goodid=" + app.goods.id +"&specs=" + specs +"&type=" + app.type;
               
			   
			   // $.post("/home/order",{
			   //     '_token':'{{csrf_token()}}',
			   //     class:'addSuper',
			   //     id:id,
			   //     liquid:app.liquid,
			   //     stick:app.stick,
			   //     type:type,
			   //     payTypesChecked:app.islastsuper,
			   //     specs:specs,
			   //     specslength:app.specsList.length,
			   //     Checklength:specsCheckData.length,
			   //     goods:[
			   //         {
			   //             goodsid:id,
			   //             number:1,
			   //             specs:specs,
			   //             id:''
			   //         }
			   //     ]
			   // },function (res) {
			   //     if(res.code){
			   //         window.location.href="/home/orderpage?id="+res.data.id;
			   //     } else {
			   //         layer.msg(res.data);
			   //     }
			   // });
				
            },
            //获取url id
            obtain:function (val) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == val){
                        return pair[1];
                    }
                }
            }
        },
        //自动执行
        mounted: function () {
			var _this = this;
            
        },
		updated: function () {
			console.log(app.type)
		}
    });
</script>
</html>
